import React, { useEffect } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as dat from "dat.gui";
import gsap from "gsap";
import img1 from './水泥车.png'

const baseRender = (handle: (e: THREE.Scene) => void) => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(0, 0, 10);
  scene.add(camera);
  handle(scene);
  var axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const controls = new OrbitControls(camera, renderer.domElement);
  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
};
const move = () => {
  // 目标：控制3d物体移动
  // 1、创建场景
  const scene = new THREE.Scene();
  // 2、创建相机
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  // 设置相机位置
  camera.position.set(0, 0, 10);
  scene.add(camera);
  // 添加物体
  // 创建几何体
  const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  // 根据几何体和材质创建物体
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  // 修改物体的位置
  // cube.position.set(5, 0, 0);
  cube.position.x = 0;
  // 将几何体添加到场景中
  scene.add(cube);
  // 初始化渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染的尺寸大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // console.log(renderer);
  // 将webgl渲染的canvas内容添加到body
  document.body.appendChild(renderer.domElement);
  // // 使用渲染器，通过相机将场景渲染进来
  // renderer.render(scene, camera);
  // 创建轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  // 参数调试控制器
  const gui = new dat.GUI();
  gui.add(cube.position, "x", 0, 5, 0.1);
  const params = {
    color: 0xffff00,
  };
  gui.addColor(params, "color").onChange((e) => {
    cube.material.color.set(e);
  });

  // 添加坐标轴辅助器
  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);

  // gsap控制动画
  gsap.to(cube.position, {
    duration: 1,
    y: 5,
    x: 5,
    z: 5,
    ease: "power1.inOut",
    repeat: -1,
    yoyo: true,
    onComplete: (e) => {},
  });
  function render() {
    // cube.position.x += 0.01;
    // if (cube.position.x > 5) {
    //   cube.position.x = 0;
    // }

    renderer.render(scene, camera);
    //   渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
  }

  render();
};
const line = () => {
  // 画线
  // 相机和场景
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
  );
  camera.position.set(0, 0, 100);
  camera.lookAt(0, 0, 0);

  const scene = new THREE.Scene();

  // 线材质
  const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

  // 几何体
  const points = [];
  points.push(new THREE.Vector3(-10, 0, 0));
  points.push(new THREE.Vector3(0, 10, 0));
  points.push(new THREE.Vector3(10, 0, 0));

  const geometry = new THREE.BufferGeometry().setFromPoints(points);

  // 画线
  const line = new THREE.Line(geometry, material);

  scene.add(line);
  renderer.render(scene, camera);
};
const font = () => {
  // 画线
  // 相机和场景
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(600, 600);
  renderer.setClearColor(new THREE.Color("#0e0934"));
  document.body.appendChild(renderer.domElement);
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
  );
  camera.position.set(100, 100, 100);
  camera.lookAt(0, 0, 0);
  // 创建轨道控制器
  const scene = new THREE.Scene();

  // 通过纹理的形式渲染
  // let canvas = document.createElement("canvas");
  // canvas.width = 100;
  // canvas.height = 100;
  // let ctx = canvas.getContext("2d");
  // ctx.fillStyle = "#ffff00";
  // ctx.font = "Bold 12px 宋体";
  // ctx.lineWidth = 10;
  // ctx.fillText("精灵中文字体", 10, 10);
  // let texture = new THREE.Texture(canvas);
  // texture.needsUpdate = true;
  // let material = new THREE.SpriteMaterial({ map: texture });
  // let text = new THREE.Sprite(material);
  // text.scale.set(0.5 * 100, 0.25 * 100, 0.75 * 100);
  // text.position.set(0, 0, 50);
  // scene.add(text);
  // renderer.render(scene, camera);

  // 加载loader文字json进行渲染
  const loader = new THREE.FontLoader();
  loader.load("public/font.json", function (font) {
    const geometry = new THREE.TextGeometry("Hello three.js!", {
      font: font,
      size: 12,
      height: 0,
      curveSegments: 45,
      bevelEnabled: false, // 开启斜角
      bevelThickness: 200, // 斜角度数
      bevelSize: 5, // 斜角与原文本的延伸距离
      bevelSegments: 40, // 斜角分数段
    });
    var fontMaterial = new THREE.MeshLambertMaterial({
      color: new THREE.Color(0xffffff),
      emissive: new THREE.Color(0xffffff),
    });
    var fontModel = new THREE.Mesh(geometry, fontMaterial);
    scene.add(fontModel);
    renderer.render(scene, camera);
  });
};
const point = () => {
  baseRender((scene) => {
    // // 创建几何柱体
    const geometry = new THREE.BufferGeometry();
    // 三个点的三维点坐标
    // 三个点确定一个面
    // 这个效果是一个正方形
    const vertices = new Float32Array([
      -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
      1.0, -1.0, -1.0, 1.0,
    ]);
    geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
    const geoMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
    const mesh = new THREE.Mesh(geometry, geoMaterial);
    scene.add(mesh);
  });
};
const moregeo = () => {
  // 在三维空间添加三角形面
  baseRender((scene) => {
    for (let i = 0; i < 50; i++) {
      const geometry = new THREE.BufferGeometry();
      const positionArray = new Float32Array(9);
      for (let j = 0; j < 9; j++) {
        positionArray[j] = Math.random() * 5;
      }
      geometry.setAttribute(
        "position",
        new THREE.BufferAttribute(positionArray, 3)
      );
      let color = new THREE.Color(Math.random(), Math.random(), Math.random());
      const geoMaterial = new THREE.MeshBasicMaterial({
        color,
        transparent: true,
        opacity: Math.random(),
      });
      const mesh = new THREE.Mesh(geometry, geoMaterial);
      scene.add(mesh);
    }
  });
};
const texture = () => {
  // 纹理
  baseRender((scene) => {
    const geo = new THREE.BoxBufferGeometry(1, 1, 1);
    // 纹理loader加载图片
    const textureLoading = new THREE.TextureLoader();
    const img = textureLoading.load(img1);
    img.offset.x = 0.2
    img.offset.y = 0.2
    // 图片放大不会有模糊效果而是呈现明显的锯齿状
    img.minFilter = THREE.NearestFilter
    img.magFilter = THREE.NearestFilter
    const material = new THREE.MeshBasicMaterial({
      color: "#ffff00",
      map: img, // 贴纹理
      transparent: true,
      alphaMap: img, // 没有像素的地方直接透明显示
    });
    const cube = new THREE.Mesh(geo, material);
    scene.add(cube);
  });
};

export default () => {
  useEffect(() => {
    texture();
  }, []);
  return <div>3452345345</div>;
};
